import React, {useState} from 'react';
import {Breadcrumb, Button, message} from 'antd';
import IconFont from '../../components/IconFont';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import './index.modules.css';

const Editor = (props) => {

	const handleEditorChange = (editorState) => {
		this.setState({ editorState });
	};
	const handleSubmit = () => {
		console.log(this.state.editorState.toHTML());
		message.success('提交成功');
	};
	const handleClear = () => {
		this.setState({
			editorState: BraftEditor.createEditorState(null)
		});
	};

	const [editorState,setEditorState] = useState(BraftEditor.createEditorState('哈哈哈，这里是富文本编辑器'));

	return (
		<div>
			<div className="crumbs">
				<Breadcrumb separator="/">
					<Breadcrumb.Item>
						<IconFont type="anticon-lx-calendar" /> 表单相关
					</Breadcrumb.Item>
					<Breadcrumb.Item> 富文本编辑器</Breadcrumb.Item>
				</Breadcrumb>
			</div>
			<div className="container">
				<BraftEditor className="bf-editor" value={editorState} onChange={handleEditorChange} />
				<div className="mt20">
					<Button type="primary" onClick={handleSubmit}>
						提交内容
					</Button>
					<Button className="ml20" onClick={handleClear}>
						清空内容
					</Button>
				</div>
			</div>
		</div>
	);
}

export default Editor;
